<template>
  <div class="app-container common home">
    <h2>普通按钮(el-btn,修改默认success,primary颜色)</h2>
    <el-button class="el-button-40" type="primary">主要按钮（40px）</el-button>
    <el-button type="warning">警告按钮(36px)</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="primary">主要按钮</el-button>

    <!-- <h2>普通按钮(非el-btn, 可自定义变量扩展其他颜色)</h2>
    <p>16px字号按钮</p>
    <a class="common-btn b-btn">新增</a>
    <a class="common-btn r-btn">删除</a>
    <a class="common-btn o-btn">导入</a>
    <p>14px字号按钮</p>
    <a class="common-btn-s b-btn">搜索</a>
    <a class="common-btn-s w-btn">重置</a> -->

    <h2>tab页签</h2>

    <selectTab
      class="select-tab"
      :meauList="meauList"
      :activeIndex.sync="activeIndex"
      :btnShow="btnShow"
    />

    <h2>搜索框</h2>
    <div class="search-common">
      <el-input
        class="declareCalendarSearch"
        clearable
        v-model="queryParams.keyWords"
        placeholder="输入关键词，检索已监控信息"
        @keyup.enter.native="searchMethod"
      ></el-input>
      <span class="searchBtn" @click="searchMethod">
        <img
          :src="require('@/assets/image/commonImages/ico-policySearch.png')"
          alt=""
        />
        查询
      </span>
    </div>

    <h2>搜索表单</h2>
    <h4>高度36px; 字号14px(默认)</h4>

    <el-form
      class="el-form-height32"
      :inline="true"
      :model="searchParams"
      label-width="70px"
    >
      <el-form-item label="项目名称：">
        <el-input
          v-model="searchParams.name"
          placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="专家类别：">
        <el-select v-model="searchParams.createName" placeholder="请选择">
          <el-option
            v-for="item in createNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>

    <h2>表单</h2>
    <h4>高度40px; 标题字号16px; 输入框字号14px</h4>
    <el-form
      :model="queryParams"
      label-width="130px"
      class="el-form-height40"
      :rules="formRules"
    >
      <el-form-item label="项目名称：" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="专家类别：" prop="createName">
        <el-select v-model="queryParams.createName" placeholder="请选择">
          <el-option
            v-for="item in createNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 单选 -->
      <el-form-item label="政策单选：">
        <el-radio-group v-model="queryParams.radio">
          <el-radio :label="1">选项一</el-radio>
          <el-radio :label="2">选项二</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 复选 -->
      <el-form-item label="政策复选：">
        <el-checkbox-group v-model="queryParams.checkbox">
          <el-checkbox :label="1">选项一</el-checkbox>
          <el-checkbox :label="2">选项二</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 切换 -->
      <el-form-item label="政策切换：">
        <el-switch v-model="queryParams.switch"></el-switch>
      </el-form-item>
      <!-- 数值 -->
      <el-form-item label="政策数值：">
        <el-input-number v-model="queryParams.number"></el-input-number>
      </el-form-item>
      <!-- 时间范围 -->
      <el-form-item label="时间范围：">
        <el-time-picker
          is-range
          v-model="queryParams.dateRange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-time-picker>
      </el-form-item>
      <!-- 评审时间 -->
      <el-form-item label="评审时间：">
        <!-- 开始日期 -->
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <span class="date-line">-</span>
        <!-- 结束日期 -->
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <!-- 项目内容 -->
      <el-form-item label="项目内容：">
        <el-input
          type="textarea"
          v-model="queryParams.content"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <!-- 文件上传 -->
      <el-form-item label="文件上传：">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" class="upload-btn" type="primary">
            <img src="@/assets/image/commonStyle/upload-img2.png" alt="" />
            点击上传</el-button
          >
          <div slot="tip" class="el-upload__tip">
            上传文件大小不能超过 500kb!
          </div>
        </el-upload>
      </el-form-item>
      <!-- 头像上传 -->
      <el-form-item label="头像上传：" class="pic-upload">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
          <div class="upload-text">点击上传</div>
          <div slot="tip" class="el-upload__tip">
            图片类型png,jpeg,图片大小2M以下
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <!-- 封面上传 -->
      <el-form-item label="封面上传：" class="pic-upload pic-w150">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
          <div class="upload-text">点击上传</div>
          <div slot="tip" class="el-upload__tip">
            图片类型png,jpeg,图片大小2M以下
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <h2>表格</h2>
    <el-form :model="tableForm" :rules="tableFormRules">
      <table class="form-table-common">
        <tr>
          <th class="require">毕业院校</th>
          <td>
            <el-form-item prop="name">
              <el-input
                v-model="tableForm.name"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </td>
          <th class="require">专业方向</th>
          <td colspan="5">
            <el-form-item prop="major">
              <el-input
                v-model="tableForm.major"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th class="require">工作单位</th>
          <td>
            <el-form-item>
              <el-input
                v-model="tableForm.unit"
                placeholder="请输入工作单位"
              ></el-input>
            </el-form-item>
          </td>
          <th class="require">单位类别</th>
          <td colspan="5">
            <el-form-item>
              <el-input
                v-model="tableForm.type"
                placeholder="请输入单位类别"
              ></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th class="require">工作二级单位</th>
          <td colspan="7">
            <el-form-item>
              <el-input
                v-model="tableForm.secondUnit"
                placeholder="请输入工作二级单位"
              ></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th>政策内容</th>
          <td colspan="7">
            <el-form-item>
              <el-input
                v-model="tableForm.name"
                placeholder="请输入政策内容"
              ></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
      <br />
      <br />

      <table class="form-table">
        <tr>
          <td :rowspan="rowList.length + 1" class="w240">
            <span>科技成果(项)</span>
          </td>
          <td><span>类型</span></td>
          <td><span>等级</span></td>
          <td><span>数量</span></td>
          <td class="w240"><span>操作</span></td>
        </tr>
        <tr v-for="(item, index) in rowList" :key="`rowList${index}`">
          <td>
            <el-form-item :prop="'rowList.' + index + '.type'">
              <el-select v-model="item.type" placeholder="请选择">
                <el-option style="width: 100%" label="科技成果" value="1">
                </el-option>
                <el-option style="width: 100%" label="科技成果2" value="2">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item :prop="'rowList.' + index + '.level'">
              <el-select v-model="item.level" placeholder="请选择">
                <el-option style="width: 100%" label="国家级" value="1">
                </el-option>
                <el-option style="width: 100%" label="省级" value="2">
                </el-option>
                <el-option style="width: 100%" label="市级" value="3">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item :prop="'rowList.' + index + '.quantity'">
              <el-input v-model="item.quantity" placeholder="请输入"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-button
              type="primary"
              icon="el-icon-plus"
              circle
              v-if="index === 0"
              @click="addRowList"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              v-if="index > 0"
              @click="delRowList(index)"
            ></el-button>
          </td>
        </tr>
      </table>
    </el-form>

    <h2>数据表格</h2>

    <el-table :data="tableData" border header-cell-class-name="headerStyle">
      <el-table-column align="center" width="100">
        <template slot="header">
          <span>序号</span>
        </template>
        <template slot-scope="scope">
          {{
            scope.$index + (queryParams.pageNum - 1) * queryParams.pageSize + 1
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="monitorTypeName"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot="header">
          <span>名称</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.monitorTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="monitorTask" align="center">
        <template slot="header">
          <span>创建人</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.monitorTask }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="companyAttributeName"
        align="center"
        :show-overflow-tooltip="true"
        width="133"
      >
        <template slot="header">
          <span>属性</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="baseCreateTime"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot="header">
          <span>创建时间</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="baseUpdateTime">
        <template slot="header">
          <span>更新时间</span>
        </template>
        <template slot-scope="scope">
          {{ scope.row.baseUpdateTime ? scope.row.baseUpdateTime : "--" }}
        </template>
      </el-table-column>

      <el-table-column align="center" :show-overflow-tooltip="true">
        <template slot="header">
          <span>操作</span>
        </template>
        <template slot-scope="scope">
          <span class="row-btn-detail">查看详情</span>
          <span class="row-btn-del">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <h2>标签</h2>
    <el-tag
      v-for="item in tagItems"
      :key="item.label"
      :type="item.type"
      effect="dark"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
      // 表格数据
      tableData: [
        {
          monitorTypeName: "名称",
          monitorTask: "创建人",
          companyAttributeName: "属性",
          baseCreateTime: "创建时间",
          baseUpdateTime: "更新时间",
        },
      ],
      tableForm: {
        name: "",
        major: "",
        unit: "",
        type: "",
        secondUnit: "",
      },
      tableFormRules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        major: [
          {
            required: true,
            message: "请输入专业方向",
            trigger: "blur",
          },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      rowList: [
        {
          type: "",
          level: "",
          quantity: "",
        },
        {
          type: "",
          level: "",
          quantity: "",
        },
      ],
      searchParams: {
        name: "",
        createName: "",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWords: "",
        name: "",
        createName: "",
        radio: "",
        checkbox: [],
        switch: false,
        number: "",
        dateRange: "",
        startTime: "",
        endTime: "",
        content: "",
      },
      formRules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        createName: [
          {
            required: true,
            message: "请选择专家类别",
            trigger: "change",
          },
        ],
      },
      // 头像上传
      dialogImageUrl: "",
      dialogVisible: false,

      // tab页签
      meauList: ["页签一", "页签二", "页签三"],
      activeIndex: 0,
      btnShow: false,
      createNameList: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "张三",
          value: "1",
        },
        {
          label: "李四",
          value: "2",
        },
      ],
      tagItems: [
        { type: "", label: "标签一" },
        { type: "success", label: "标签二" },
        { type: "info", label: "标签三" },
        { type: "danger", label: "标签四" },
        { type: "warning", label: "标签五" },
      ],
    };
  },
  methods: {
    searchMethod() {
      console.log("搜索");
    },
    addRowList() {
      this.rowList.push({
        type: "",
        level: "",
        quantity: "",
      });
    },
    delRowList(index) {
      this.rowList.splice(index, 1);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  // height: 100vh;
  overflow: auto;
  h2 {
    margin-top: 20px;
    color: #1c6de2;
  }
}
</style>
